<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button>get---获取</button>
    <button>post---添加</button>
    <button>put---修改1</button>
    <button>patch---修改2</button>
    <button>delete---删除</button>
</body>
<script src="./lib/axios.min.js"></script>
<script>
    const btns = document.querySelectorAll("button");
	btns[0].onclick = function(){
		// 1- 发送请求
		// axios({
        //     // 请求地址
        //     url:"http://zhangpeiyue.com/scoreList"
        // })

        // 2- 指定查询字符串
        // axios接收的对象称为配置对象
        // axios({
        //     url:"http://zhangpeiyue.com/scoreList",
        //     //params指定的是一个对象，将对象转为urlencoded  ===》 age=12&sex=男，最后与url进行拼接
        //     // http://zhangpeiyue.com/scoreList?age=12&sex=男
        //     params:{
		// 		age:12,
        //         sex:"男"
        //     }
        // })

        // 3- 指定请求头
        // axios({
        //     // 配置请求头
        //     headers:{
		// 		token:"123"
        //     },
        //     // 指定的请求方式，默认是get
        //     // method:"post",
        //     url:"http://zhangpeiyue.com/scoreList",
        //     params:{
		// 		age:12
        //     }
        // })

        // 4- 获取响应体信息
		{
			// 4-1- axios返回的是一个Promise实例
            // const p = axios({url:"http://zhangpeiyue.com/scoreList"});
			// fulfilled
            // 对象
			// config:配置对象
			// data:响应体信息
			// headers：响应头信息
			// request:xhr实例
            // status:状态码
			// statusText：状态码说明
			// p.then(value=>{
			// 	console.log(value.data);
            // })
            // p.then(({data})=>{
			// 	console.log(data);
            // })

            // 4-2- 处理异常
            // const p = axios({
            //     url:"http://zhangpeiyue.com/scoreL1ist"
            // });
			// p.then(value=>{
			// 	console.log(value.data);
            // }).catch(reason => {
			// 	console.log("异常",reason)
            // })

            // 4-3- 链式调用
			// axios({
			// 	url:"http://zhangpeiyue.com/scoreList"
			// }).then(value=>{
			// 	console.log(value.data);
			// }).catch(reason => {
			// 	console.log("异常",reason)
			// })

            // 4-4- async await
			// (async function(){
			// 	const {data} = await axios({
            //         url:"http://zhangpeiyue.com/scoreList"
            //     });
			// 	console.log(data);
            // })();

            // 4-5- axios.get
            // 第一个参数是请求地址，第二个参数是配置对象
            // axios.get("http://zhangpeiyue.com/scoreList").then(({data})=>{
			// 	console.log(data);
            // })

			axios.get("http://zhangpeiyue.com/scoreList",{
				// 请求头
				headers:{
					token:"abc"
                },
                // 查询对象
                params:{
					age:12
                }
            }).then(({data})=>{
				console.log(data);
			})

		}
    }
	btns[1].onclick = function(){
		// 1- 完整写法
        // axios({
        //     // 请求方式
        //     method:"post",
        //     url:"http://zhangpeiyue.com/scoreList",
        //     // 请求体:对象代表请求体的格式为 application/json
		// 	// data:{
		// 	// 	username:"毛不易",
		// 	// 	age:18,
		// 	// 	sex:"男"
		// 	// }
        //     // 请求体:字符串代表请求体的格式为 application/x-www-form-urlencoded
        //     data:"username=古巨基&age=56"
        //
        // }).then(value=>{
		// 	console.log(value.data);
        // })

        // 2- .post
        // 第一个参数是请求地址，第二个参数是请求体，第三个参数配置对象
        // axios.post("http://zhangpeiyue.com/scoreList",{
		// 	username:"时代少年团",
        //     age:18
        // },{
		// 	params:{
		// 		a:1,
        //         b:2
        //     },
        //     headers:{
		// 		token:"abc"
        //     }
        // }).then(value=>{
		// 	console.log(value)
        // })
    }
    btns[2].onclick = function(){
		// 完整修改
		axios.put("http://zhangpeiyue.com/scoreList/1",{
			username:"王一博",
            age:12
        }).then(value=>{
			console.log(value.data);
        })
    }
	btns[3].onclick = function(){
		// 非完整修改，只修改指定的属性
		axios.patch("http://zhangpeiyue.com/scoreList/2",{
			userName:"刘德华",
			age:50,
            sex:"男"
		}).then(value=>{
			console.log(value.data);
		})
	}
	btns[4].onclick = function(){
		// 第一个参数是请求地址，第二个参数是配置对象
		axios.delete("http://zhangpeiyue.com/scoreList/1").then(value=>{
			console.log(value.data);
        })
    }
</script>
</html>